.composerAttachments-container { background: $tertiary }
.composerAttachments-hidden {display: none}

.composerAttachments-close .composerAttachments-loaders {display: none}

.composerAttachments-header {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-top: 1px solid $border;
    width: 100%;
    appearance: none;
    background-color: transparent;
    // just to avoid some font differences in some browsers
    font: inherit;
    cursor: pointer;
}

.composerAttachments-header * { pointer-events: none }

.composerAttachments-loaders {
    display: flex;
    flex-wrap: wrap;
    max-height: 85px;
    overflow: auto;
    padding: 10px;
    border-top: 1px solid $border;
}

.composerAttachments-loader {
    margin-top: 10px;
    width: 50%;
}

.composerAttachments-loader:first-child,
.composerAttachments-loader:nth-child(2) {margin-top: 0}

.composerAttachments-loader:nth-child(even) { padding-left: 5px }
.composerAttachments-loader:nth-child(odd) { padding-right: 5px }

.composerAttachments-size {margin-right: 1em}
.composerAttachments-action {margin-left: auto}
[class*="composerAttachments-counter-"] { margin-right:1em; }
